<template>
	<view>
		<div class="header" :style="{'padding-top': statusBarHeight + 'px'}">
			<div class="back center" @click="back">
				<image src="/static/icon/back.png" mode="widthFix" class="w-20"></image>
			</div>
			{{$t('名片编辑')}}
		</div>
		<u--form :model="model1" :rules="rules" ref="uForm" class="ml-20 mr-20 formSty">
			<view class="contentBg">
				<p class="titleSty pt-30">{{$t('公司名称')}}</p>
				<u-form-item prop="username">
					<u--input :placeholder="$t('请输入公司名称')" v-model="model1.username" class="businessSty"></u--input>
				</u-form-item>
				<p class="titleSty">{{$t('公司地址')}}</p>
				<u-form-item prop="reg_address">
					<u--input :placeholder="$t('请输入公司地址')" v-model="model1.reg_address" class="businessSty"></u--input>
				</u-form-item>
				<p class="titleSty">{{$t('上传用户头像')}}</p>
				<u-form-item prop="avatar">
					<u-upload :fileList="model1.avatar" @afterRead="afterRead" @delete="() => { model1.avatar = [] }"
						name="avatar" :multiple="true" :maxCount="1" width="150" height="150"
						class="mt-20 rounded-18 xxxxx" ></u-upload>
				</u-form-item>
				<view class="flex-start mt-28">
					<p class="fz28 font-bold text-010">{{$t('上传公司图片')}}</p>
					<p class="fz24 text-888 ml-15 mt-3">({{$t('可上传多个')}})</p>
				</view>
				<u-form-item prop="shop_image">
					<u-upload :fileList="model1.shop_image" @afterRead="afterRead" @delete="deletePic" name="shop_image"
						:multiple="true" :maxCount="5" width="150" height="150" class="mt-20 rounded-18 xxxxx"></u-upload>
				</u-form-item>
				<view class="flex-start mt-28">
					<p class="fz28 font-bold text-010">{{$t('上传视频')}}</p>
					<p class="fz24 text-888 ml-15 mt-3">({{$t('上传')}}1个)</p>
				</view>
				<u-form-item prop="video">
					<u-upload :fileList="model1.buy_videos" @afterRead="afterRead" @delete="deletePic" name="buy_videos"
						:multiple="true" :maxCount="1" accept="video" width="150" height="150"
						class="mt-20 rounded-18 xxxxx" ></u-upload>
				</u-form-item>
				<p class="titleSty">{{$t('公司简介')}}</p>
				<u-form-item prop="profile">
					<u--textarea v-model="model1.profile" maxlength="100" count :placeholder="$t('请输入公司简介')"
						class="textareaSty"></u--textarea>
				</u-form-item>

				<p class="titleSty" @click="add()">{{$t('设置主营路线')}} <text>+</text></p>


				<view class="cityBox mt-30" style="position: relative;margin-bottom: 22px;"
					v-for="(item, index) in luxian" :key="index">
					<view class="citySty center pl-30">
						<city style="width: 100%;" is_all="true" :value="item.cfd[0].id" @change="e => {
							$set(item.cfd[0], 'itemfullBeginAddress', e.column2.value == -1 || e.column3.value == -1 ?
						[e.column1.label, e.column2.label.replace('全部', ''), e.column3.label.replace('全部', '')].filter(item => item).join(',') :
						e.column3.label);
							$set(item.cfd[0], 'shortname', e.column2.value == -1 || e.column3.value == -1 ?
						[e.column1.label, e.column2.label.replace('全部', ''), e.column3.label.replace('全部', '')].filter(item => item).join(',') :
						e.column3.label);
							$set(item.cfd[0], 'id', [e.column1.value, e.column2.value, e.column3.value].join(','));
							$set(item.cfd[0], 'fullBeginAddressKey', [e.column1.value, e.column2.value, e.column3.value].join(','));
						}">
							{{ item.cfd[0].shortname || $t('请选择') }}
						</city>
					</view>
					<image src="../../static/icon/change.png" mode=""></image>
					<!-- <image src="@/static/icon/change.png" mode=""></image> -->
					<view class="citySty text-right mr-50 center">
						<city is_all="true"  style="width: 100%;text-align: right;" :value="item.mdd[0].id" @change="e => {
							$set(item.mdd[0], 'fullEndAddress', e.column2.value == -1 || e.column3.value == -1 ?
						[e.column1.label, e.column2.label.replace('全部', ''), e.column3.label.replace('全部', '')].filter(item => item).join(',') :
						e.column3.label);
							$set(item.mdd[0], 'shortname', e.column2.value == -1 || e.column3.value == -1 ?
						[e.column1.label, e.column2.label.replace('全部', ''), e.column3.label.replace('全部', '')].filter(item => item).join(',') :
						e.column3.label);
							$set(item.mdd[0], 'id', [e.column1.value, e.column2.value, e.column3.value].join(','));
							$set(item.mdd[0], 'fullEndAddressKey', [e.column1.value, e.column2.value, e.column3.value].join(','));
						}">
							<div style="text-align: right;">
								{{ item.mdd[0].shortname || $t('请选择') }}
							</div>
						</city>
					</view>

					<view v-if="index != 0" @click="jian(index)"
						style="position: absolute; top: -20px; border: 1px solid #000; padding: 2px 7px; opacity: 0.3; border-radius: 50px; left:96%;font-size: 24rpx;">
						X</view>

				</view>

				<p class="titleSty mt-44">{{$t('设置服务项目')}}</p>
				<u-form-item prop="demand" border ref="demand" class="advanBoxSty">
					<button v-for="(item, index) in advantageList" class="common"
						:class="{ checkedSty: item.checked == true }" @click="advanCheck(item, index)">
						{{ item.text }}
					</button>
					<u--textarea v-model="model1.services_text" maxlength="100" count :placeholder="$t('编辑信息')"
						class="textareaSty"></u--textarea>
				</u-form-item>

				<view class="between">
					<p class="titleSty">{{$t('收费标准')}}</p>
					<p class="templateSty" style="display: none;">{{$t('查看模板')}}</p>
				</view>
				<u-form-item prop="cost_image">
					<u-upload :fileList="model1.cost_image" @afterRead="afterRead" @delete="deletePic" name="cost_image"
						:multiple="true" uploadText="+ 请上传贵公司收费图片" :maxCount="1" height="250" width="600"
						class="mt-20 rounded-18 feeStandardSty">
					</u-upload>
				</u-form-item>
				<view class="between">
					<p class="titleSty">{{$t('客户保障')}}</p>
					<p class="templateSty" style="display: none;">{{$t('查看模板')}}</p>
				</view>

				<u-form-item prop="ensure_text">
					<u--textarea maxlength="100" count v-model="model1.ensure_text" :placeholder="$t('请编写贵公司的理赔或保障方案')"
						class="textareaSty"></u--textarea>
				</u-form-item>

				<p class="titleSty">{{$t('上传营业执照')}}</p>
				<u-form-item prop="images">
					<u-upload :fileList="model1.license_image" @afterRead="afterRead" @delete="deletePic"
						name="license_image" :multiple="true" :maxCount="1" width="150" height="150"
						class="mt-20 rounded-18 xxxxx"></u-upload>
				</u-form-item>

			</view>
		</u--form>

		<view class="empty"></view>
		<view class="footer_btn4">
			<view class="btn_blue" @click="submit">
				{{$t('确认提交')}}
			</view>
		</view>
	</view>
</template>

<script>
import Title from './components/title.vue'
import {
	submitAfterSales
} from '@/api/order.js'
import citySelect from "./components/citySelect.vue"

export default {
	components: {
		Title,
		citySelect
	},
	data() {
		return {
			statusBarHeight: uni.getStorageSync('statusBarHeight') || 0,
			title: this.$t('名片编辑'),
			loading: true,
			content: '',

			fileList1: [],
			fileList: [],
			fileListUp: [],

			advanCheckList: [],
			advantageList: [{
				text: this.$t('报关'),
				key: '1',
				checked: false
			},
			{
				text: this.$t('清关'),
				key: '2',
				checked: false
			},
			{
				text: this.$t('运输'),
				key: '3',
				checked: false
			},
			{
				text: this.$t('仓储'),
				key: '4',
				checked: false
			},
			{
				text: this.$t('装卸'),
				key: '5',
				checked: false
			},
			{
				text: this.$t('转关'),
				key: '6',
				checked: false
			},

			],
			model1: {
				user_id: uni.getStorageSync("user_id"), // 用户id
				demand: '',
				username: '', // 公司名称
				reg_address: '' // 公司注册地址
			},
			luxian: [],
			rules: {
				'username': {
					type: 'string',
					min: 1,
					required: true,
					message: this.$t('请填写公司具体名称'),
					trigger: ['change']
				},
				'reg_address': {
					type: 'string',
					min: 1,
					required: true,
					message: this.$t('请填写公司地址'),
					trigger: ['change']
				},
				'profile': {
					type: 'string',
					min: 1,
					required: true,
					message: this.$t('请输入公司简介'),
					trigger: ['change']
				},
			},
		}
	},
	onLoad(options) {
		this.getUserInfo()
	},
	methods: {
		add() {
			this.loading = false
			this.luxian.push({
				cfd: [{
					itemfullBeginAddress: "",
					shortname: "",
					fullBeginAddressKey: "",
				}],
				mdd: [{
					itemfullBeginAddress: "",
					shortname: "",
					fullBeginAddressKey: "",
				}]
			})
			this.loading = true
		},
		jian(index) {
			this.luxian.splice(index, 1);
		},
		//获取名片
		getUserInfo() {
			var that = this
			uni.request({
				url: 'https://app.gluz.com.cn/api/user/getUserHomepage2',
				data: {
					user_id: uni.getStorageSync('user_id')
				},
				header: {
					"user_id": uni.getStorageSync('user_id'),
					'xzdToken': uni.getStorageSync('xzdToken'),
					'version': uni.getStorageSync('version'),
					'lang': uni.getStorageSync('lang'),
				},
				success: (res) => {
					this.model1 = res.data.data.userInfo;
					console.log([{ url: this.getImageUrl(this.model1.avatar) }],'this.model1')
					this.model1.avatar = this.model1.avatar ? [{ url: this.getImageUrl(this.model1.avatar) }] : []
					this.model1.shop_image = this.model1.shop_image.map(item => ({ url: this.getImageUrl(item) }))
					this.model1.buy_videos = this.model1.buy_videos ? [{ url: this.getImageUrl(this.model1.buy_videos) }] : []
					this.model1.cost_image = this.model1.cost_image ? [{ url: this.getImageUrl(this.model1.cost_image) }] : []
					this.model1.license_image = this.model1.license_image ? [{ url: this.getImageUrl(this.model1.license_image) }] : []
					this.model1.demand = this.model1.provide_services_id
					// this.$set(this, "luxian", res.data.data.luxian)
					this.luxian = res.data.data.luxian;

					var demand = this.model1.provide_services_id || '';
					for (var i = 0; i < that.advantageList.length; i++) {
						if (demand.indexOf(that.advantageList[i]['key']) != '-1') {
							that.advantageList[i]['checked'] = true
						}
					}
				}
			});
		},

		image_handle(path) {
			return 'https://gluz-oss.oss-cn-beijing.aliyuncs.com' + path;
		},


		advanCheck(item, index) {
			this.model1.demand = ''
			for (const check in this.advantageList) {
				if (check == index) {

					if (this.advantageList[check].checked == true) {
						this.advantageList[check].checked = false
					} else {
						this.advantageList[check].checked = true
					}

					// if (this.advanCheckList.indexOf(item.key) == -1) {
					// 	this.advanCheckList.push(item.key)
					// } else {
					// 	this.advanCheckList = this.advanCheckList.filter(del => del !== item.key)
					// }
				}
			}

			for (var i = 0; i < this.advantageList.length; i++) {
				if (this.advantageList[i]['checked'] == true) {
					this.model1.demand += this.advantageList[i]['key'] + ','
				}
			}

			this.model1.demand = this.model1.demand.replace(/^,|,$/g, "");

		},

		submit() {
			var that = this
			var transport_list = ''
			console.log(this.luxian,'this.luxianthis.luxian')
			let bolean = this.luxian.every((ele)=> {
				return ele.cfd[0].id && ele.mdd[0].id
			})
			if (!bolean) {
				uni.showToast({
					title: this.$t('请选择起止和终止路线'),
					icon: 'none',
				})
				return;
			}
			if (this.luxian.length == 0){
				uni.showToast({
					title: this.$t('请选择起止和终止路线'),
					icon: 'none',
				})
				return;
			}
			if (this.luxian) {
				for (var i = 0; i < this.luxian.length; i++) {
					transport_list += this.luxian[i]['cfd'][0]['id'] + ',' + this.luxian[i]['mdd'][0]['id'] + ';'
				}
			}
			uni.showLoading({
				title: 'loading...'
			})
			this.$refs.uForm.validate().then(res => {

				uni.request({
					url: 'https://app.gluz.com.cn/api/user/profile',
					data: {
						user_id: uni.getStorageSync('user_id'),
						username: this.model1.username,
						reg_address: this.model1.reg_address,
						avatar: this.model1.avatar,
						shop_image: this.model1.shop_image,
						buy_videos: this.model1.buy_videos,
						profile: this.model1.profile,
						provide_services_id: this.model1.demand,
						transport_list: transport_list,
						services_text: this.model1.services_text,
						cost_image: this.model1.cost_image,
						ensure_text: this.model1.ensure_text,
						license_image: this.model1.license_image
					},
					header: {
						"user_id": uni.getStorageSync('user_id'),
						'xzdToken': uni.getStorageSync('xzdToken'),
						'version': uni.getStorageSync('version'),
						'lang': uni.getStorageSync('lang'),
					},
					method: 'POST',
					success: (res) => {
						// 更新app头像

						uni.hideLoading()
						if (res.data.msg == 'successful') {
						
							this.isMessageGo({
								action: 'upDateUser',
								data: {
									name: this.model1.username,
									avatar: this.getImageUrl(this.model1.avatar[0].url)
								}
							})
							uni.$u.toast('提交成功')
							setTimeout(() => {
								that.back()
							}, 500)
						} else {
							uni.$u.toast('提交失败')
						}
					}
				})
			}).catch(errors => {
				uni.$u.toast(this.$t('请检查是否有未填写字段'))
			})
		},

		back() {
			// uni.navigateBack()
			this.cback()
		},

		async afterRead(event) {
			// 当设置 multiple 为 true 时, file 为数组格式，{{$t('否')}}则为对象格式
			let lists = [].concat(event.file)
			var that = this

			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url)
				if (!this.model1[event.name]) this.model1[event.name] = []
				this.model1[event.name].push({
					url: this.image_handle(result)
				})
			}
		},
		uploadFilePromise(url) {
			return new Promise((resolve, reject) => {
				let a = uni.uploadFile({
					url: 'https://app.gluz.com.cn/api/common/upload',
					filePath: url,
					name: 'file',
					formData: {
						user: 'test'
					},
					header: {
						'xzdToken': uni.getStorageSync('cad2ca15-2f0c-40b4-b1ae-d4035de2fed6&status'),
						'version': uni.getStorageSync('1.0.0'),
						'lang': uni.getStorageSync('zh'),
						'Authorization': 'Bearer ' + uni.getStorageSync(
							'cad2ca15-2f0c-40b4-b1ae-d4035de2fed6&status') // 在这里添加token
					},
					success: (res) => {
						const data = JSON.parse(res.data)
						resolve(data.data.url)
					}
				});
			})
		},
		deletePic(event) {
			var that = this
			if (event) {
				this.loading = false
				this.model1[event.name].splice(event.index, 1)
				setTimeout(function () {
					that.loading = true
				}, 500)
			}
		},
	}
}
</script>

<style lang="less">
page {
	background: #F6F7FB;
}

.empty {
	width: 100%;
	height: 50rpx;
}

.advanBoxSty {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: flex-start;
	margin-top: 24rpx;

	.common {
		width: 204rpx;
		height: 80rpx;
		border-radius: 500rpx;
		background: #F7F7F7;
		color: #333;
		font-family: "PingFang SC";
		font-size: 24rpx;
		font-style: normal;
		font-weight: 400;
		line-height: 80rpx;
		margin-left: 20rpx;
	}

	uni-button {
		margin-right: 0 !important;
	}

	/deep/ .u-form-item__body__right__content__slot {
		flex-wrap: wrap;
	}

	.common:first-child {
		margin-left: 0;
	}

	.common:nth-child(4) {
		margin-left: 0;
	}

	.common:nth-child(n+5):nth-child(-n+7) {
		margin-top: 16rpx;
	}

	.checkedSty {
		border: 1rpx solid #278AFF;
		background: #D7E9FF;
		color: #278AFF;
		font-weight: 600;
	}

	.timeBtnSty {
		width: 294rpx;
		height: 64rpx;
		margin-top: 16rpx;
		border-radius: 500rpx;
		background: #F7F7F7;
		color: #333;
		font-family: "PingFang SC";
		font-size: 24rpx;
		font-style: normal;
		font-weight: 400;
	}
}

.cityBox {
	width: 100%;
	height: 120rpx;
	border-radius: 26rpx;
	border: 1rpx solid #D8D8D8;
	display: flex;
	justify-content: space-evenly;
	margin-bottom: 36rpx;

	.citySty {
		width: 274rpx;
		height: 100%;
		// border-bottom: 2rpx solid #F0F0F0;
		color: #0E0E0E;
		font-family: "PingFang SC";
		font-size: 36rpx;
		font-style: normal;
		font-weight: 600;
	}

	image {
		width: 60rpx;
		height: 60rpx;
		margin: auto 0;
	}
}

.titleSty {
	color: #1D1D1D;
	font-family: "PingFang SC";
	font-size: 28rpx;
	font-style: normal;
	font-weight: 600;
	margin-top: 40rpx;
}

.templateSty {
	color: #F53F3F;
	font-family: "PingFang SC";
	font-size: 24rpx;
	font-style: normal;
	font-weight: 600;
	margin-top: 40rpx;
}

.inputSty {
	border-radius: 18rpx;
	background-color: #fff;
	line-height: 95rpx;

	e-input {
		float: right;
	}

	/deep/ .uni-input-input {
		text-align: right;
		margin-right: 50rpx;
	}
}

/deep/ .u-form-item__body__left__content__label {
	color: #1D1D1D;
	font-family: "PingFang SC";
	font-size: 28rpx;
	font-style: normal;
	font-weight: 600;
}

uni-button:after {
	border: none;
}

.formSty {
	padding-bottom: 200rpx;

	/deep/ .u-form-item__body {
		padding: 0;
	}
}

.contentBg {
	background-color: #fff;
	padding: 0 24rpx;
	margin-top: 24rpx;
	border-radius: 18px;
	padding-bottom: 35rpx;

	/deep/ .u-form-item__body__right__message {
		margin-left: 0 !important;
	}

	/deep/ .u-icon__icon {
		font-size: 60rpx !important;
	}

	/deep/ .uni-input-placeholder {
		color: #8C8C8C !important;
		font-size: 26rpx;
	}

	/deep/ .uni-textarea-placeholder {
		color: #8C8C8C !important;
		font-size: 26rpx;
	}

	/deep/ .u-textarea {
		padding-top: 24rpx;
		padding-left: 24rpx;
	}
}

.topBg {
	background-color: #fff;
	padding: 0 16rpx;
	margin-top: 24rpx;
	border-radius: 18px;
}

.textareaSty {
	height: 226rpx;
	border-radius: 18rpx;
	border: 2rpx solid #D8D8D8;
	// background: #F7F7F7;
	margin-top: 14rpx;
}

.feeStandardSty {
	/deep/ .u-upload__button {
		width: 100% !important;
		background-color: #fff !important;
		border: 2rpx solid #D8D8D8;
		border-radius: 18rpx;
	}

	/deep/ .u-icon {
		display: none !important;
	}

	/deep/ .u-upload__button__text {
		color: #8C8C8C;
		font-size: 26rpx;
	}
}

.businessSty {
	height: 80rpx;
	border-radius: 18rpx;
	border: 2rpx solid #d8d8d8;
	// background:none !important ;
	color: #333;
	font-family: "PingFang SC";
	font-size: 26rpx;
	font-style: normal;
	font-weight: 400;
	margin-top: 24rpx;
	text-indent: 24rpx;
}

.businessStyDis {
	height: 80rpx;
	border-radius: 18rpx;
	border: none;
	// background:none !important ;
	color: #333;
	font-family: "PingFang SC";
	font-size: 26rpx;
	font-style: normal;
	font-weight: 400;
	margin-top: 24rpx;
	text-indent: 24rpx;
}

.badBtn {
	height: 80rpx;
	border-radius: 18rpx;
	// background: #F7F7F7;
	border: 2rpx solid #D8D8D8;
	display: flex;
	justify-content: space-between;
}

.header {
	font-size: 34rpx;
	height: 100rpx;
	font-weight: bold;
	text-align: center;
	position: relative;
	background: #fff;
	position: sticky;
	top: 0;
	left: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: content-box;
}

.back {
	position: absolute;
	width: 70rpx;
	height: 70rpx;
	bottom: 15rpx;
	left: 0;
}

.footer_btn4 {
	position: fixed;
	left: 0;
	bottom: 0;
	right: 0;
	// display: flex;
	// align-items: center;
	// justify-content: space-between;
	background: #fff;
	padding: 30rpx 24rpx 60rpx;

	.btn_blue {
		width: 100%;
		height: 94rpx;
		flex-shrink: 0;
		border: 2rpx solid rgba(3, 189, 130, 0.10);
		border-radius: 500rpx;
		background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
		color: #FFF;
		font-family: "PingFang SC";
		font-size: 32rpx;
		font-style: normal;
		font-weight: 600;
		text-align: center;
		line-height: 94rpx;
	}

	// .btn_item{
	// 	text-align: center;
	// 	padding:0 10rpx;
	// 	.name{
	// 		color: #8C8C8C;
	// 		font-size: 20rpx;
	// 		line-height: 22rpx;
	// 	}
	// }
	// .ico{
	// 	width: 42rpx;
	// 	height: 42rpx;
	// }
}

.info_jiesuan {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-radius: 18rpx;
	background: #F6F7FB;
	padding: 20rpx 24rpx;
	color: #333;
	font-size: 26rpx;
	line-height: 40rpx;
	overflow: hidden;

	.jian {
		color: #FE3E3B;
	}
}

.disp_title {
	color: #1D1D1D;
	font-size: 28rpx;
	font-weight: 600;
	line-height: 28rpx;
	padding: 24rpx 35rpx 10rpx;
}

.bor_bgff {
	margin: 20rpx 24rpx;
	background: #fff;
	border-radius: 20rpx;
}

.disp_info {
	padding: 0 24rpx 30rpx;

	.title {
		color: #1D1D1D;
		font-size: 28rpx;
		font-weight: 600;
		line-height: 28rpx;
		padding: 34rpx 0 24rpx;
	}

	.info_text {
		border-radius: 18rpx;
		background: #F6F7FB;
		padding: 20rpx 24rpx;
		color: #333;
		font-size: 26rpx;
		line-height: 40rpx;
		overflow: hidden;
	}
}

.item_photo {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	align-content: flex-start;
	flex-wrap: wrap;
	gap: 18rpx;
	padding: 20rpx 0;

	.ph {
		display: block;
		width: 150rpx;
		height: 150rpx;
		flex-shrink: 0;
		border-radius: 15rpx;
	}
}

.guanl_order {
	margin: 20rpx 24rpx;
	height: 96rpx;
	background: #fff;
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 16rpx 0 24rpx;

	.name {
		font-size: 28rpx;
		line-height: 40rpx;
		font-weight: 600;
	}

	.info {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-weight: 600;

	}
}

.modalSty {
	text-align: center;
}

</style>


<style>
.xxxxx {
	.uicon-close {
		font-size: 28rpx !important;
	}
}
</style>